<script setup>
import { ref, onMounted } from 'vue'

const currentUser = ref(null)
const membershipLevel = ref('free')
const membershipTiers = [
  {
    id: 'free',
    name: '基础版',
    price: '0',
    period: '永久',
    features: [
      '基本健康信息记录',
      '简单体质辨识',
      '健康指导基础功能',
    ],
    color: '#909399',
    buttonText: '当前',
    disabled: true
  },
  {
    id: 'standard',
    name: '标准版',
    price: '29.9',
    period: '月',
    features: [
      '所有基础版功能',
      '完整中医体质辨识',
      '详细健康综合评估',
      '基础调理方案',
      '访问部分休闲娱乐内容'
    ],
    color: '#409EFF',
    buttonText: '升级',
    disabled: false
  },
  {
    id: 'premium',
    name: '高级版',
    price: '69.9',
    period: '月',
    features: [
      '所有标准版功能',
      '绑定3个家庭成员账号',
      '完整健康管理方案',
      '关键风险控制',
      '未病改善方案',
      '完整休闲娱乐功能',
      '中医未病社群互动'
    ],
    color: '#F56C6C',
    buttonText: '升级',
    disabled: false
  }
]

onMounted(() => {
  // 获取用户信息
  const userInfo = uni.getStorageSync('userInfo')
  if (userInfo) {
    currentUser.value = userInfo
    membershipLevel.value = userInfo.membershipLevel || 'free'
    
    // 更新会员按钮状态
    membershipTiers.forEach(tier => {
      if (tier.id === membershipLevel.value) {
        tier.buttonText = '当前'
        tier.disabled = true
      } else {
        tier.buttonText = '升级'
        tier.disabled = false
      }
    })
  } else {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/login/index'
      })
    }, 1500)
  }
})

function upgradeMembership(tier) {
  // 如果是当前等级，不做任何操作
  if (tier.id === membershipLevel.value) {
    return
  }
  
  // 模拟支付过程
  uni.showModal({
    title: '升级会员',
    content: `确定要升级到${tier.name}吗？将扣除${tier.price}元/${tier.period}`,
    success: function(res) {
      if (res.confirm) {
        // 模拟支付中
        uni.showLoading({
          title: '支付中...'
        })
        
        // 模拟网络请求延迟
        setTimeout(() => {
          uni.hideLoading()
          
          // 更新用户会员等级
          const users = uni.getStorageSync('users') || []
          const userIndex = users.findIndex(u => u.username === currentUser.value.username)
          
          if (userIndex !== -1) {
            users[userIndex].membershipLevel = tier.id
            uni.setStorageSync('users', users)
            
            // 更新当前登录用户信息
            currentUser.value.membershipLevel = tier.id
            uni.setStorageSync('userInfo', currentUser.value)
            
            // 更新当前显示的会员等级
            membershipLevel.value = tier.id
            
            // 更新会员按钮状态
            membershipTiers.forEach(t => {
              if (t.id === tier.id) {
                t.buttonText = '当前'
                t.disabled = true
              } else {
                t.buttonText = '升级'
                t.disabled = false
              }
            })
            
            uni.showToast({
              title: '升级成功',
              icon: 'success'
            })
          } else {
            uni.showToast({
              title: '用户数据异常',
              icon: 'none'
            })
          }
        }, 1500)
      }
    }
  })
}
</script>

<template>
  <view class="container">
    <view class="header">
      <view class="title">会员服务</view>
      <view class="subtitle">升级会员，享受更多健康服务</view>
    </view>
    
    <view class="current-membership">
      <view class="section-title">当前会员等级</view>
      <view 
        class="membership-badge"
        :style="{ backgroundColor: membershipTiers.find(t => t.id === membershipLevel)?.color }"
      >
        {{ membershipTiers.find(t => t.id === membershipLevel)?.name }}
      </view>
    </view>
    
    <view class="tiers-container">
      <view class="section-title">会员等级对比</view>
      
      <view v-for="tier in membershipTiers" :key="tier.id" class="tier-card">
        <view class="tier-header" :style="{ backgroundColor: tier.color }">
          <view class="tier-name">{{ tier.name }}</view>
          <view class="tier-price">
            <text class="currency">¥</text>
            <text class="amount">{{ tier.price }}</text>
            <text class="period" v-if="tier.price !== '0'">/{{ tier.period }}</text>
          </view>
        </view>
        
        <view class="tier-features">
          <view 
            v-for="(feature, index) in tier.features" 
            :key="index" 
            class="feature-item"
          >
            <text class="feature-icon">✓</text>
            <text class="feature-text">{{ feature }}</text>
          </view>
        </view>
        
        <button 
          class="upgrade-btn" 
          :style="{ backgroundColor: tier.disabled ? '#ccc' : tier.color }"
          :disabled="tier.disabled"
          @tap="upgradeMembership(tier)"
        >
          {{ tier.buttonText }}
        </button>
      </view>
    </view>
    
    <view class="tips">
      <view class="tips-title">会员权益说明</view>
      <view class="tips-content">
        <view class="tip-item">1. 标准版和高级版均为按月付费，可随时取消</view>
        <view class="tip-item">2. 高级版可绑定3个家庭成员账号，共享健康管理服务</view>
        <view class="tip-item">3. 升级会员可解锁更多健康指导和休闲娱乐功能</view>
        <view class="tip-item">4. 如有问题，请联系客服：400-888-8888</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 40rpx;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.current-membership {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .membership-badge {
    display: inline-block;
    padding: 8rpx 30rpx;
    border-radius: 30rpx;
    color: #fff;
    font-size: 28rpx;
    font-weight: bold;
  }
}

.tiers-container {
  margin-bottom: 30rpx;
}

.tier-card {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .tier-header {
    padding: 30rpx;
    color: #fff;
    
    .tier-name {
      font-size: 34rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    
    .tier-price {
      display: flex;
      align-items: baseline;
      
      .currency {
        font-size: 28rpx;
        margin-right: 5rpx;
      }
      
      .amount {
        font-size: 48rpx;
        font-weight: bold;
      }
      
      .period {
        font-size: 24rpx;
        margin-left: 5rpx;
      }
    }
  }
  
  .tier-features {
    padding: 20rpx 30rpx;
    
    .feature-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 15rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .feature-icon {
        margin-right: 15rpx;
        color: #67C23A;
        font-weight: bold;
      }
      
      .feature-text {
        font-size: 26rpx;
        color: #666;
        flex: 1;
      }
    }
  }
  
  .upgrade-btn {
    width: 100%;
    height: 80rpx;
    color: #fff;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
  }
}

.tips {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  
  .tips-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .tips-content {
    .tip-item {
      font-size: 26rpx;
      color: #666;
      margin-bottom: 10rpx;
      padding-left: 20rpx;
      position: relative;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style> 